<template>
  <div class="dataRecord"  v-loading="loading" :element-loading-text="$t('oralScan.oralScan_116')">
    <el-card class="version-log-management-page__header">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="query.serialNumber" :placeholder="$t('oralScan.oralScan_48')" clearable />
        </el-col>
        <el-col :span="6">
          <el-input v-model="query.softwareVersion" :placeholder="$t('oralScan.oralScan_47')" clearable />
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="dates"
            :end-placeholder="$t('versionLogManagement.version02')"
            :start-placeholder="$t('versionLogManagement.version01')"
            format="yyyy-MM-dd"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-col>
        <el-col :span="6" class="query_btn">
          <el-button type="primary" icon="el-icon-search" @click="toSearch">
            {{ $t('versionLogManagement.version00') }}
          </el-button>
          <el-button type="primary" @click="exportExcel()">
            {{ $t('orderManage.export') }}
          </el-button>
          <el-button @click="reset()">{{ $t('add.add124') }}</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="table_box">
      <el-table :data="tableData" style="width: 100%" height="570" @sort-change="handleSortChange">
        <el-table-column width="150" prop="serialNumber" :label="$t('oralScan.oralScan_10')" align="center" sortable="custom"/>
        </el-table-column>
        <el-table-column width="150" prop="softwareVersion" :label="$t('oralScan.oralScan_37')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="orderId" :label="$t('oralScan.oralScan_6')" align="center" />
        </el-table-column>
        <el-table-column width="150" prop="impression" :label="$t('tableSweeper.tableSweeper_04')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="postCore" :label="$t('tableSweeper.tableSweeper_05')" align="center"  sortable="custom"/>
        </el-table-column>
        <el-table-column width="150" prop="plant" :label="$t('tableSweeper.tableSweeper_06')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="movableBracket" :label="$t('tableSweeper.tableSweeper_07')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="totalScanningTime" :label="$t('tableSweeper.tableSweeper_08')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="scanStartTime" :label="$t('tableSweeper.tableSweeper_09')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="scanEndTime" :label="$t('tableSweeper.tableSweeper_10')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="lightMachineIlluminationDuration" :label="$t('tableSweeper.tableSweeper_11')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="flashbackFrequency" :label="$t('tableSweeper.tableSweeper_12')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="gpuInformation" :label="$t('tableSweeper.tableSweeper_13')" align="center" />
        </el-table-column>
        <el-table-column width="150" prop="cpuInformation" :label="$t('tableSweeper.tableSweeper_14')" align="center" />
        </el-table-column>
        <el-table-column width="150" prop="time" :label="$t('oralScan.oralScan_14')" align="center"  sortable="custom" />
      </el-table-column>
      </el-table>
    </div>

    <el-pagination background :current-page="query.page" :page-size="query.limit" :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="onPageSizeChange" @current-change="onPageChange" />
  </div>
</template>

<script>
import { formatDate } from '@/utils/index';
import { exportExl } from '@/utils/xls';
export default {
  name: 'OralScan',

  data() {
    return {
      loading: false,
      dates: [],
      tableData: [],
      query: {
        page: 1,
        limit: 10,
        serialNumber: '',
        softwareVersion: '',
      },
      total: 0,
    };
  },

  created() {
    this.toSearch();
  },
  mounted() { },
  methods: {
    toSearch() {
      this.query.page = 1;
      this.search();
    },
    handleSortChange({ prop, order }) {
      if (prop === 'serialNumber') {
        this.query.sortField = 'serial_number';
      } else if (prop === 'softwareVersion') {
        this.query.sortField = 'software_version';
      } else if (prop === 'impression') {
        this.query.sortField = 'impression';
      } else if (prop === 'postCore') {
        this.query.sortField = 'post_core';
      } else if (prop === 'plant') {
        this.query.sortField = 'plant';
      } else if (prop === 'movableBracket') {
        this.query.sortField = 'movable_bracket';
      } else if (prop === 'totalScanningTime') {
        this.query.sortField = 'total_scanning_time';
      } else if (prop === 'scanStartTime') {
        this.query.sortField = 'scan_start_time';
      } else if (prop === 'scanEndTime') {
        this.query.sortField = 'scan_end_time';
      }else if (prop === 'lightMachineIlluminationDuration') {
        this.query.sortField = 'light_machine_illumination_duration';
      }else if (prop === 'flashbackFrequency') {
        this.query.sortField = 'flashback_frequency';
      }else if (prop === 'time') {
        this.query.sortField = 'time';
      }
      if (order === 'ascending') {
        this.query.sortType = 'asc';
      } else if (order === 'descending') {
        this.query.sortType = 'desc';
      }
      this.toSearch();
    },
     // 定义一个方法来赋值时间
     assignmentQuery() {
      
      if (this.dates && this.dates.length > 0) {
        
        this.query.startTime = this.dates[0];
        this.query.endTime = this.dates[1];
      } else {
        this.query.startTime = '';
        this.query.endTime = '';
      }
    },
    search() {
      this.assignmentQuery();
      this.$http({
        url: '/tablescandatarecording/scanDataRecordsDataPage',
        method: 'post',
        data: {
          page: String(this.query.page),
          limit: String(this.query.limit),
          serialNumber: this.query.serialNumber,
          softwareVersion: this.query.softwareVersion,
          startTime: this.query.startTime,
          endTime: this.query.endTime,
          sortField:this.query.sortField,
          sortType:this.query.sortType,
        },
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onPageSizeChange(pageSize) {
      this.query.limit = pageSize;
      this.search();
    },
    onPageChange(page) {
      this.query.page = page;
      this.search();
    },
    reset() {
      this.dates = [];
      this.query = {
        page: 1,
        limit: 10,
        serialNumber: '',
        softwareVersion: '',
      };

      this.toSearch();
    },
    exportExcel() {
      this.loading = true;
      this.$http({
        method: 'post',
        url: 'tablescandatarecording/scanDataRecordsDataPageExportExcel', //后端接口
        responseType: 'blob',
        data: {
          page: String(this.query.page),
          limit: String(this.total),
          serialNumber: this.query.serialNumber,
          softwareVersion: this.query.softwareVersion,
          startTime: this.query.startTime,
          endTime: this.query.endTime,

        },
      }).then(({ data: res }) => {
        let date = formatDate(new Date(), 'second');
        exportExl(res, `${this.$t('tableSweeper.tableSweeper_01')}_${date}.xls`);
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dataRecord {
  width: 100%;
  height: 100%;

  .el-select,
  .el-date-editor {
    width: 100%;
  }

  .table_box {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .query_btn {
    text-align: right;
  }
}
</style>
